<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input{
				width: 200;
			}
			/*属性选择器[属性名="值"]*/
			input[type=text]{
				border-color: red;
			}
			/*表示只要包含该属性就选中*/
			input[name]{
				border-color: blue;
			}
			/*表示 匹配 属性的值以空格隔开的片段*/
			input[my~="hell"]{
				border-color: #0000FF;
			}
			/*表示匹配 以xx开头的值*/
			input[data^="ab"]{
				border-color: yellow;
			}
			/*表示匹配 以xx结尾的值*/
			input[data$="ef"]{
				color: yellow;
			}
			/*表示匹配 包含xx的值*/
			input[data*="abc"]{
				background-color: skyblue;
			}
			/*表示匹配 以xx开头并且以"-"连接的值*/
			input[data|="e"]{
				height: 50px;
			}
		</style>
	</head>
	<body>
		<input type="text" id="" value="" />
		<input type="password" name="" id="" value="" />
		<input type="number" name="" id="" value="" my="hello hi" />
		<input type="text" data="abc-def"/>
	</body>
</html>
